<template>
  <div>
    <template>
      <el-button type="danger" style="margin-bottom:5px" @click="batchChangeState" icon="el-icon-s-release">批量禁/反禁用</el-button>
      <el-button type="primary" @click="handleAdd" icon="el-icon-circle-plus">新增颜色</el-button>
      <el-table
        border
        :data="tableData.filter(data => !search || data.cname.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%; padding-bottom: 3px;"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="200" align="center"></el-table-column>
        <el-table-column label="序号" type="index" width="200" align="center"></el-table-column>
        <el-table-column label="颜色" prop="cname" width="600" align="center">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.cname }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="禁用状态" prop="cstate" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.cstate" @change="changeState(scope.row.cid, scope.row.cstate)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot="header">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
              clearable/>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.pageNum"
          :page-sizes="[5, 10, 50, 100]"
          :page-size.sync="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.count"
        >
        </el-pagination>
      </div>
    </template>
    <colors-info v-if="dialogInfoVisible" :title="title" :color="color" :dialogVisible="dialogInfoVisible" @successCallback="successCallback"/>
  </div>
</template>

<script>
import Sortable from "sortablejs"
import ColorsInfo from "./colorsInfo.vue"
import color from "../../../api/apis/product/color"
import execute from "../../../utils/constant/execute"
import stateCode from "../../../utils/constant/stateCode"

export default {
  name: "colorsTable",
  components: {ColorsInfo},
  data () {
    return {
      tableData: [],
      pagination: { pageNum: 1, pageSize: 5, count: 100 },
      search: "",
      dialogInfoVisible: false,
      title: "",
      color: {},
      multipleSelection: []
    }
  },
  methods: {
    handleEdit (index, row) {
      this.$message({ showClose: true, message: "准备修改颜色", row, type: execute.SUCCESS })
      this.dialogInfoVisible = true
      this.title = "颜色修改"
      this.color = row
    },
    handleAdd () {
      this.dialogInfoVisible = true
      this.color = {}
      this.title = "颜色新增"
    },
    successCallback () {
      this.loadData()
      this.dialogInfoVisible = false
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    changeState (cid, cstate) {
      let formData = { "cid": cid, "cstate": cstate }
      color.fetchEditColor(formData).then((res) => {
        if (res.data.code === stateCode.OPRATION_SUCCESS) {
          this.$message({ type: execute.SUCCESS, message: res.data.msg })
        } else {
          this.$message({ type: execute.WARNING, message: res.data.msg })
        }
      }).catch((res) => {
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: execute.ERROR
        })
      })
    },
    filterTag (value, row) {
      return row.tag === value
    },
    filterHandler (value, row, column) {
      const property = column["property"]
      return row[property] === value
    },
    handleSizeChange (pageSize) {
      let params = new FormData()
      params.append("pageNum", 1)
      params.append("pageSize", pageSize)
      this.loadData(params)
    },
    handleCurrentChange (pageNum) {
      let params = new FormData()
      params.append("pageNum", pageNum)
      this.loadData(params)
    },
    tableRowClassName ({row}) {
      return row.cstate ? "lock" : ""
    },
    batchChangeState () {
      this.$confirm("请谨慎批量禁/反禁用操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: execute.WARNING,
        center: true
      }).then(() => {
        color.fetchBatchChangeState(this.multipleSelection).then((res) => {
          if (res.data.code === stateCode.OPRATION_SUCCESS) {
            this.$message({ type: execute.SUCCESS, message: res.data.msg })
          } else {
            this.$message({ type: execute.INFO, message: res.data.msg })
          }
          this.loadData()
        }).catch((res) => {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: execute.ERROR
          })
        })
      }).catch((res) => {
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: execute.ERROR
        })
      })
    },
    loadData (params) {
      params = new FormData()
      if (this.pagination.pageNum !== undefined && this.pagination.pageSize !== undefined) {
        params.append("pageNum", this.pagination.pageNum)
        params.append("pageSize", this.pagination.pageSize)
      }
      color.fetchGetColorByPage(params).then((res) => {
        this.pagination.pageNum = res.data.data.pageNum
        this.pagination.count = res.data.data.count
        this.tableData = res.data.data.result
      })
    }
  },
  created () {
    this.loadData()
  },
  mounted () {
    let el = document.querySelectorAll(
      ".el-table__body-wrapper > table > tbody"
    )[0]
    this.sortable = Sortable.create(el)
  }
}
</script>

<style>
.sortable-ghost {
  opacity: 0.9;
}
.sortable-ghost td {
  border-top: 1px dashed #666666 !important;
  border-bottom: 1px dashed #666666 !important;
  color: #fff !important;
}
.sortable-ghost td:first-child {
  border-left: 1px dashed #666666 !important;
}
.sortable-ghost td:last-child {
  border-right: 1px dashed #666666 !important;
  border-bottom: 1px dashed #666666 !important;
}
.el-table .lock {
  background: rgb(255, 214, 214);
}
</style>
<style lang="scss">
p.dragtabe {
  margin-top: 30px;
}
</style>
